<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>新增用户</title>
<%@ include file="/commons/basejs.jsp"%>
</head>
<style>
.z-body {
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 5%
}
</style>
<body>

	<form class="layui-form layui-form-pane z-body"  enctype="multipart/form-data" >
			<div class="layui-form-item">
				<div class="layui-input-inline">
				<button type="button" class="layui-btn" id="uploadHead">
                  <i class="layui-icon">&#xe67c;</i>上传头像
               </button>
				</div>
				<div class="layui-input-inline">
						<img id="imgHead" src="${ctxPath}/static/build/images/xx.png" value="/static/build/images/xx.png" width="50px"
							height="50px" class="layui-upload-img layui-circle">
							<input id="photo" type="hidden" name="photo" value="/static/build/images/xx.png">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="uname" class="layui-form-label"> <span
					class="x-red">*</span>用户名 </label>
				<div class="layui-input-inline">
					<input type="text" id="loginName" name="loginName" required
						lay-verify="required" autocomplete="off" class="layui-input">
				</div>
				<div id="ms" class="layui-form-mid layui-word-aux">
					<span class="x-red">*</span><span id="ums">将会成为您唯一的登入名</span>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label for="realName" class="layui-form-label"> <span
						class="x-red">*</span>真实姓名 </label>
					<div class="layui-input-inline">
						<input type="text" id="name" name="name"
							lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label for="age" class="layui-form-label"> <span
						class="x-red">*</span>年龄 </label>
					<div class="layui-input-inline" >
						<input type="text" id="age" name="age" lay-verify="number" required
							autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item" >
				<div class="layui-inline">
					<label for="age" class="layui-form-label"> <span
						class="x-red">*</span>性別 </label>
					<div class="layui-input-inline"  pane>
						   <input type="radio" name="sex" value="0" title="男"  checked />
                           <input type="radio" name="sex" value="1" title="女" />
					</div>
				</div>
			</div>
				<div class="layui-form-item">
				<div class="layui-inline">
					<label for="age" class="layui-form-label"> <span
						class="x-red">*</span>手机 </label>
					<div class="layui-input-inline">
						<input type="text" id="phone" name="phone" lay-verify="required|phone|number" required
							autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label for="password" class="layui-form-label"> <span
						class="x-red">*</span>密码 </label>
					<div class="layui-input-inline">
						<input type="password" id="password" name="password" value="123456" required
							lay-verify="password" autocomplete="off" class="layui-input">
					</div>
						<div id="ms" class="layui-form-mid layui-word-aux">
					<span class="x-red">*</span><span id="mrp">密码默认123456</span>
				</div>
				</div>
			</div>
				<div class="layui-form-item">
				<div class="layui-inline">
					<label for="password" class="layui-form-label"> <span
						class="x-red">*</span>确定密码 </label>
					<div class="layui-input-inline">
						<input type="password" id="rpwd" name="rpwd" value="123456" required
							lay-verify="password" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">角色选择</label>
				<div class="layui-input-block" style="width:50%">
				
				<c:forEach items="${roleList}" var="roleList"> 
					<input type="checkbox" name="roleIds" title="${roleList.name}" 
						value="${roleList.id}"/> 
				</c:forEach>
				
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">部门选择</label>			
				<div class="layui-input-inline">
					<input type="hidden" name="organizationId" id="pId">
	                <input type="text" id="pName"  onclick="showTree();"  lay-verify="pName" class="layui-input" />	                      
				</div>
				 <div id="treeNode"  style="display:none; position: absolute;z-index:1000;background-color: white;">
                      <div  id="tree"></div>
                 </div>     
            </div>
		  <div class="layui-form-item" >
            <div class="layui-input-block">
				<button class="layui-btn" lay-filter="addUser" lay-submit="">新增</button>
				<button class="layui-btn layui-btn-primary" id="close"
					onclick="dream_close()">取消</button>
			</div>
        </div>
        <br/><br/><br/>
	</form>

<script type="text/javascript">
layui.use('form', function(){
  //只有执行了这一步，部分表单元素才会自动修饰成功
  var form = layui.form; 
  //但是，如果HTML是动态生成的，自动渲染就会失效
  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
  form.render();
});    


layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#uploadHead' //绑定元素
    ,url:  basePath +'/images' //上传接口
    ,accept: 'images' //只允许上传图片
    ,size: '1024' //大小kb
    ,method:'post'
    ,done: function(res, index, upload){
        debugger;
       if(res.code == 0){
        $('#imgHead').attr('src', res.data.src);
        $('#photo').attr('value', res.data.src);
      //do something （比如将res返回的图片链接保存到表单的隐藏域）
        }else{
        layer.alert("上传失败");
        }
    }
    ,error: function(){
        layer.alert("上传错误");
    }
  });
});

 //自定义验证规则
  layui.form.verify({
    password: function(value){
      if(value.trim() == ""){
        return '请输入原密码';
      }
    }
    ,rpwd: function(value){
      var password = $('#password').val();
      if(value.trim() == ""){
        return '请输入新密码';
      }   
      if(value != password){
        return '密码不一致!';
      }
    }
    ,loginName: function(value){    
        if(value.trim() == ""){
        return '用户命不能为空';
      }
    }
    ,name: function(value){    
        if(value.trim() == ""){
        return '真实姓名不能为空';
      }
    }
    ,org: function(value){    
        if(value.trim() == ""){
        return '部门不能为空';
      }
   }
  });
  
  // 提交监听
	layui.form.on('submit(addUser)', function(data) {
	    var test = $("input[name='roleIds']:checked");  
        var checkBoxValue = "";  
        var  rolesList = [];
        //封装角色
        test.each(function(i){ 
            checkBoxValue += $(this).val()+",";  
            var role={}; 
                role.id =  $(this).val();
            rolesList.push(role);
        });
        checkBoxValue = checkBoxValue.substring(0,checkBoxValue.length-1);   
	    var data =data.field;
	    data.roleIds = checkBoxValue;
	    data.rolesList = rolesList;
	    delete data.file;
		debugger;
		$.ajax({
			type : 'POST',
			url : 'addUser',
			dataType : 'json',
			contentType : 'application/json',
			data : JSON.stringify(data),//往后台发送的是data.field，即一个{name：value}的数据结构
			async : false,
			success : function(result) {
			debugger;
				if (result.success) {
				    window.top.layui.layer.msg(result.msg);
				    dream_close();	
				    window.parent.layui.table.reload('userList');					   
				} else {
					 window.top.layui.layer.msg(result.msg, {
						icon : 5,//图标
						anim : 6//抖动
					});
				}
				
			}
		});
		 return false;
});
 
 layui.use(['form','layer'], function(){
 var nodes =  ${orgTree};
    $ = layui.jquery;
    var form = layui.form
        ,layer = layui.layer;
    layui.tree({
        elem:'#tree', 
        nodes:nodes,
        click: function(node){
            if(node.menuType=='1'){
                layer.msg('请勿选择按钮', {icon: 5,anim: 6});
                return false;
            }
          $('#pId').val(node.id);
          $('#pName').val(node.name);
        }
  });
  });



  //简单tree
  function showTree(){
      var p = $("#pName");
      var cityObj = p;
      var cityOffset = p.offset();
      var width = p.css("width");
      $('#treeNode').css({
          left: cityOffset.left + 'px',
          top: cityOffset.top + cityObj.outerHeight() + 'px',
          width:width,
          border:'1px solid #e6e6e6'
      }).slideUp('fast');
      $('body').bind('mousedown', onBodyDown);
      $('#treeNode').css('display','inline');
  };
  
  function hideMenu() {
      $('#treeNode').fadeOut('fast');
      $('body').unbind('blur', onBodyDown);
  };
  function onBodyDown(event) {
      if (! ( event.target.id == 'treeNode' || $(event.target).parents('#treeNode').length > 0)) {
          hideMenu();
      }
  };

</script>
</body>
</html>
